<!-- 页面静态由万德渝搭建
@date 2023.8.4
@author 万德渝
-->
<template>
  <div class="container">
    <div class="card-content">
      <radio-Button-Group :changeValue="radioValue" :radioOptions="testOptions" @change="radioChange" />
    </div>
  </div>
  <layout-card v-model="search" :filters="exampleOptions" headline="值机资源建议与旅客数量" headtitle="数据筛选" :hasButton="true"
    @search-change="getData" @search-reset="searchReset">
    <template #action>
      <el-button type="primary" @click="handleExport" :disabled="isexport">导出</el-button>
    </template>
    <!-- <p>{{ sum }}已值机人数</p> -->
    <NumTool :nums="sum" :numTitle="numTitle" :numTime="numTime"></NumTool>

    <table-common :columns="exampleColumns" stripe :pagination="pager" :table-data="data" :loading="loading" size="large"
      @current-change="myChangeCurrent" @size-change="myChangePageSize" @sort-change="handleSortChange">
    </table-common>
  </layout-card>
</template>

<script lang="ts" setup>
import { computed, ref, onBeforeMount, watch } from 'vue'
// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { exampleColumns } from '@/views/keynoteResource/passengerEnter/config/columns'
import { exampleOptions } from '@/views/keynoteResource/passengerEnter/config/filters'
import {
  passengerPageList,
  getExportFiles,
  passengerSum
} from '@/api/eqpt/passengerEnter'
import { usePagination } from 'vue-request'

import NumTool from '@/components/numTool/index.vue'
// 新增按钮组组件导入
import radioButtonGroup from '@/components/RadioButtonGroup/index.vue'
// =============模拟接口数据-START
// 此处是模拟的接口返回数据，项目中请用`@/api/`下接口代替，删除当前代码！
const Service = () => {
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  return new Promise(() => {
  })
}
// =============模拟接口数据==END

/**
 * author 万德渝
 * date  2023-8-5
 * 完成页面各种功能以及模拟数据的呈现
 */

const {
  run,
  data,
  loading,
  current,
  pageSize,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  total,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
    totalKey: 'data.total'
  }
})
// 监听data数据 判断到处按钮是否可用
watch(data, (newVal) => {
  if (newVal.length === 0) {
    isexport.value = true
  } else {
    isexport.value = false
  }
})

const testOptions = ref([
  { label: '值机数据', value: '值机数据' },
  { label: '安检数据', value: 2 },
  { label: '登机数据', value: 3 },
  { label: '地铁数据', value: 4 },
  { label: '机场大巴数据', value: 5 },
  { label: '航班计划', value: 6 },
  { label: '航班动态', value: 7 },
  { label: '航站楼入口', value: 8 }
])
// 7-21新增用于保存下拉列表选择数据

// 用于接收页面顶部按钮组的值
const radioValue = ref()

// 自定义一个变量接受查询返回的数据总数
const myTotal = ref(1)

// 用于传值给numTool组件
const sum = ref('0')
const numTitle = ref('已值机人数')
const numTime = ref()

// 7-17------------------
const pager = computed(() => ({
  currentPage: current.value,
  pageSize: pageSize.value,
  total: myTotal.value,
  // 7-24 手动设置了总页数
  pageCount: Math.ceil(myTotal.value / pageSize.value) === 0 ? 1 : Math.ceil(myTotal.value / pageSize.value)
}))

// 用于进行分页查询的参数
const search = ref<FilterDataType>({})

// 置灰按钮
const isexport = ref(false)

// 按钮组点击事件
const radioChange = (value) => {
  radioValue.value = value
}

// 重写页码改变时间
const myChangeCurrent = (value: any) => {
  changeCurrent(value)
  getData()
}
// 当前页展示数量
const myChangePageSize = (value: any) => {
  changePageSize(value)
  getData()
}
// 当表头sortable值为custom时 调用后端排序方法所需要传入的参数
const handleSortChange = (column: any) => {
  const prop = column.prop
  let order = column.order
  if (order === 'descending') {
    order = 'DESC'
  } else if (order === 'ascending') {
    order = 'ASC'
  }
  search.value.order = [{ column: prop, method: order }]
  getData()
}

// 清空按钮
const searchReset = (data: FilterDataType) => {
  radioValue.value = undefined
  search.value = data
  pager.value.currentPage = 1
  pager.value.pageSize = 10
  getData()
}
// 获取数据
const getData = () => {
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: { ...search.value, dataType: radioValue.value }
  }
  passengerPageList(params).then((res) => {
    data.value = res.data.list
    myTotal.value = res.data.total
  })
  passengerSum().then((res) => {
    sum.value = res.data.num + ''
    numTime.value = res.data.time
  })
  run(params)
  loading.value = false
}

function getCurrentDateTime() {
  const currentDateTime = new Date()
  const year = currentDateTime.getFullYear()
  const month = (currentDateTime.getMonth() + 1).toString().padStart(2, '0')
  const day = currentDateTime.getDate().toString().padStart(2, '0')
  const hours = currentDateTime.getHours().toString().padStart(2, '0')
  const minutes = currentDateTime.getMinutes().toString().padStart(2, '0')
  const seconds = currentDateTime.getSeconds().toString().padStart(2, '0')

  const dateTimeString = year + month + day

  return dateTimeString
}

// 导出方法
const handleExport = () => {
  getExportFiles({ ...search.value, dataType: radioValue.value })
    .then((res) => {
      const debug = res
      if (debug) {
        const elink = document.createElement('a')
        elink.download = `旅客进站${getCurrentDateTime()}.xlsx`
        elink.style.display = 'none'
        const blob = new Blob([debug], { type: 'application/x-msdownload' })
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      }
    })
}

onBeforeMount(getData)
</script>
<style>
.container {
  background: #f5f7f9;
  min-height: auto;
  overflow: hidden;
}

.container .card-content {
  padding: 10px;
  margin: 0;
  background: #fff;
  border-radius: 8px;
}
</style>
